<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="关键字">
          <el-input v-model="listQuery.keyword" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleSearch">查询</el-button>
          <el-button plain @click="handleReset">重置</el-button>

        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <div class="table-container-header">
        <el-button type="primary" plain @click="handleCreate">新增</el-button>
        <el-button plain type="danger" @click="removeRecord">批量删除</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        height="100%"
        style="width: 100%"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="60" label="序号" />
        <el-table-column prop="code" sortable label="编号" width="100" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="description" label="描述" min-width="150" />
        <el-table-column label="操作" align="center" fixed="right" width="90">
          <template slot-scope="scope">
            <button-option icon="el-icon-edit" skin="primary" title="编辑" @click="handleUpdate(scope.row)" />
            <button-option icon="el-icon-delete" skin="danger" title="删除" @click="handleRemoveSingle(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_handler">
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
      </div>
    </div>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="600px"
      :before-close="handleClose"
    >
      <div>
        <el-form ref="recordForm" :model="roleRecord" :rules="roleRule" label-width="100px">
          <el-form-item label="编号：" prop="code">
            <el-input v-model="roleRecord.code" placeholder="请输入角色编号" :disabled="dialog.status == 'updated'" auto-complete="on" maxlength="10" show-word-limit clearable />
          </el-form-item>
          <el-form-item label="名称：" prop="name">
            <el-input v-model="roleRecord.name" placeholder="请输入角色名称" auto-complete="on" maxlength="20" show-word-limit clearable />
          </el-form-item>
          <el-form-item label="描述：" prop="description">
            <el-input v-model="roleRecord.description" type="textarea" placeholder="请输入角色描述" maxlength="100" show-word-limit clearable />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialog.status == 'updated'?updateData():createData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelectionRecords: [],
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        keyword: '',
        sort: '+gmtModified'
      },
      dialog: {
        title: '新增商品分类',
        status: 'created',
        visible: false
      },
      roleRecord: {

      },
      roleRule: {
        code: [
          { required: true, message: '请输入角色编号', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    /* 全选/反选*/
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },
    /* 表格列排序*/
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = '+gmtModified'
      }
      this.handleSearch()
    },
    fetchData() {
      this.$store.dispatch('rolePage', this.listQuery).then((res) => {
        this.list = res.records
        this.total = res.total
      }).catch((_) => {})
    },
    handleSearch() {
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.fetchData()
    },
    handleReset() {
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: 20,
        keyword: undefined,
        sort: '+gmtModified'
      }
      this.fetchData()
    },
    handleCreate() {
      this.roleRecord = {}
      this.dialog = {
        visible: true,
        status: 'created',
        title: '新增角色'
      }
      this.$nextTick(() => {
        this.$refs.recordForm.clearValidate()
      })
    },
    createData() {
      this.$refs.recordForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('roleSave', this.roleRecord).then((res) => {
            this.$message.success('添加成功！')
            this.dialog = {
              visible: false
            }
            this.handleReset()
          }).catch((_) => {})
        } else {
          return false
        }
      })
    },
    handleUpdate(row) {
      this.roleRecord = Object.assign({}, row)
      this.dialog = {
        visible: true,
        status: 'updated',
        title: '编辑角色'
      }
      this.$nextTick(() => {
        this.$refs.recordForm.clearValidate()
      })
    },
    updateData() {
      this.$refs.recordForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('roleUpdate', this.roleRecord).then((res) => {
            this.$message.success('修改成功！')
            this.dialog = {
              visible: false
            }
            this.handleReset()
          }).catch((_) => {})
        } else {
          return false
        }
      })
    },
    /* 删除*/
    handleRemoveSingle(row) {
      this.multipleSelectionRecords = []
      this.multipleSelectionRecords.push(row)
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.removeRecord()
    },
    removeRecord() {
      if (this.multipleSelectionRecords.length > 0) {
        const ids = []
        this.multipleSelectionRecords.forEach(function(v, i) {
          ids.push(v.id)
        })
        this.$confirm('此操作将永久删除记录, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('roleRemove', ids).then(response => {
            this.handleReset()
            this.$message.success('删除成功')
          }).catch(() => {})
        }).catch(() => { })
      } else {
        this.$message.warning('请选择要删除的记录')
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
